/**
 * Description
 *
 * Creation Date 14/12/2017
 * @author Candy
 */
import React, { Component } from 'react';
import { View, Text, Button, Image, StyleSheet } from 'react-native';
import { StackNavigator, TabNavigator, TabBarBottom, withNavigation } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
import { Provider } from 'react-redux';
import store from './redux/store/store';
import HomeScreen from './pages/Home';
import ProductScreen from './pages/Product';
import CartScreen from './pages/cart';
import ProfileScreen from './pages/Profile';
import CategoryScreen from './pages/Category';
import PaymentScreen from './pages/Payment';
import LoginScreen from './pages/Login';
import Detail from './pages/Detail';
import ModalMenu from './components/modalRoute';

const Tab = TabNavigator(
	{
		Home: {
			screen: HomeScreen,
			navigationOptions: ({ navigation }) => ({
				tabBarLabel: 'Home',
				tabBarIcon: ({focused, tintColor}) => (
					<Icon name="ios-home" size={30} color={tintColor} />
				)
			})
		},
		Category: {
			screen: CategoryScreen,
			navigationOptions: ({ navigation }) => ({
				tabBarLabel: 'Category',
				tabBarIcon: ({focused, tintColor}) => (
					<Icon name="ios-menu" size={30} color={tintColor} />
				)
			})
		},
		Cart: {
			screen: CartScreen,
			navigationOptions: ({ navigation }) => ({
				tabBarLabel: 'Cart',
				tabBarIcon: ({focused, tintColor}) => (
					<Icon name="ios-cart" size={30} color={tintColor} />
				)
			})
		},
		Profile: {
			screen: ProfileScreen,
			navigationOptions: ({ navigation }) => ({
				tabBarLabel: 'Profile',
				tabBarIcon: ({focused, tintColor}) => (
					<Icon name="ios-person" size={30} color={tintColor} />
				)
			})
		}
	},
	{
		tabBarComponent: TabBarBottom,
		tabBarPosition: 'bottom',
		swipeEnabled:false,
		animationEnabled:false,
		initialRouteName: 'Category',
		lazy: true,
		tabBarOptions: {
			activeTintColor: '#f9b233',
			inactiveTextColor: '#434343',
			style: {
				backgroundColor: '#434343'
			}
		}
	}
);

const Navigator = StackNavigator(
	{
		Tab: { screen: Tab },
		ProductDetail: { screen: ProductScreen},
		PaymentDetail: { screen: PaymentScreen},
		LoginDetail: { screen: LoginScreen},
	},
	{
		navigationOptions: {
			// title: 'test',
			headerBackTitle: 'Back',
			headerTintColor: '#434343',
			showIcon: true,
			mode: 'modal',
			headerMode: 'none',
		}
	}
);
const ModalNavigator = StackNavigator(
	{
		MainNavigator: { screen: Navigator },
		ModalMenu: { screen: ModalMenu},
	},
	{
		mode: 'modal',
		headerMode: 'none',
	}
);

store.subscribe(() => { //监听state变化
	console.log(store.getState())
});

export default class Main extends Component {
	render() {
		return (
			<Provider store={store}>
				<View style={styles.container}>
					<Navigator/>
				</View>
			</Provider>
		)
	}
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: '#fff',
		justifyContent: 'center'
	}
});